import React, { useState } from 'react';
import { Carousel, Skeleton } from 'antd';
import { useEffect } from "react"


interface Props {
    swiperlist: SwiperItem[],
    autoplay?: boolean // ? 是可选的意思, 父组件可以传,也可以不传
}

interface SwiperItem {
    id: number,
    img: string,
    link: string
}

function Banner(props: Props) {
    var { swiperlist, autoplay = false } = props;
    const contentStyle: React.CSSProperties = {
        height: '400px',
        lineHeight: '160px',
        textAlign: 'center',
        width: "1600px"
    };
    return (
        <div className='banner'>
            {swiperlist.length == 0 ?
                <Skeleton active /> :
                <Carousel className='myswiper' autoplay={autoplay}>
                    {
                        swiperlist.map((item, index) => {
                            return (
                                <div key={index}>
                                    <img src={item.img} alt="" style={contentStyle} />
                                </div>
                            )
                        })
                    }
                </Carousel>
            }
        </div>
    );
}

export default Banner;